<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog_"
      persistent
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card class='regi-card'>
        <v-card-title>
          <span class="text-h4">用户注册</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-text-field
                  label="昵称 NickName*"
                  prepend-icon='mdi-account'
                  persistent-hint
                  v-model="registerData.nickname"
                  required
                />
              </v-col>
              <v-col cols="12">
                <v-text-field
                  label="邮箱 Email*"
                  prepend-icon='mdi-email'
                  hint="用户邮箱用于用户登录"
                  persistent-hint
                  v-model="registerData.email"
                  required
                ></v-text-field>
              </v-col>

              <v-col cols="12">
                <v-text-field
                  v-model="registerData.password"
                  label="密码 Password*"
                  name="password"
                  prepend-icon="mdi-lock"
                  :append-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
                  :type="showPassword ? 'text' : 'password'"
                  hint="密码由6-16位字母数字组合组成"
                  required
                  :rules="pwdRules"
                  @click:append="showPassword = !showPassword">
                </v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  v-model="confirmPassword"
                  :disabled="!confirmDisable"
                  label="重复密码*"
                  name="confirmPassword"
                  prepend-icon="mdi-lock"
                  :type="showPassword ? 'text' : 'password'"
                  hint="请重复密码"
                  required
                  :rules="confirmRules">
                </v-text-field>
              </v-col>
            </v-row>
          </v-container>
          <small>*星号为必填项</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="dialog_ = false"
          >
            返回
          </v-btn>

          <progress-button
            :text="true"
            :loading='loading'
            progressColor="blue darken-1"
            color="blue darken-1"
            @click="register"
            title="注册">
          </progress-button>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  import ProgressButton from '../../components/common/ProgressButton.vue'
  import userApi from '@/api/apiPath/userApi'

  export default {
    components: { ProgressButton },
    props: {
      dialog: {
        types: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        showPassword: false,
        confirmPassword: null,
        registerData: {
          nickname: null,
          email: null,
          password: null
        },
        emailRules: [
          v => !!v || '必须输入邮箱字段',
          v => /^\w+([.-]?\w+)*@\w+([.-]\w+)*(\.\w{2,3})+$/.test(v) || '请输入正确格式的邮箱'
        ],
        pwdRules: [
          v => !!v || '必须输入密码字段',
          v => /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(v) || '密码由6-16位字母数字组合组成'
        ],
        confirmRules: [
          v => !!v || '请重复密码',
          v => this.registerData.password === v || '前后两次输入密码不一致'
        ]
      }
    },
    computed: {
      dialog_: {
        get() {
          return this.dialog;
        },
        set(val) {
          //改变由父组件控制
          this.$emit('on-change-dialog', val);
        }
      },
      confirmDisable() {
        return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.registerData.password)
      },
      registerDisable() {
        const email = /^\w+([.-]?\w+)*@\w+([.-]\w+)*(\.\w{2,3})+$/.test(this.registerData.email)
        const password = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.registerData.password)
        const confirm = (this.registerData.password === this.confirmPassword)
        return email && password && confirm && !this.loading
      }
    },
    methods: {
      register() {
        const that = this
        this.loading = true
        userApi.register(this.registerData)
          .then(res => {
            that.loading = false
            if (res.message === '成功') {
              this.dialog_ = false
              this.$toast.success(res.data)
            } else {
              this.$toast.error(res.data)
            }
          })
          .catch(err => {
            console.log(err)
            that.loading = false
          })
      }
    }
  }
</script>

<style scoped>
  /deep/.v-card{
    padding: 3px;
  }
</style>
